{% extends "administrative/base.html" %}

{% block page_link %}
{#    <script src="../../static/administrative/js/dispatch_monitoring.js"></script>#}
    <link rel="stylesheet" href="../../static/administrative/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        tr {
            height: 35px;
        }

        th {
            text-align: center;
        }

        td {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
        }

        table {
            table-layout: fixed;
        }

        td:first-child, th:first-child {
            position: sticky;
            left: 0; /* 首行永远固定在左侧 */
            z-index: 1;
        }

        thead tr th {
            position: sticky;
            top: 0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }

        th:first-child {
            z-index: 2;
        }

        .li-class {
            list-style: none;
            margin-top: 2%;
            color: #0b0b0b;
            cursor: pointer;
        }
    </style>
{% endblock %}



{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="document.html" style="color: #0b0b0b;">
                <i class="iconfont icon-guochengjiankong"></i>
                <span> 收文监控</span>
            </a>
        </div>
    </div>

    <div class="right-box" style="width: 100%;height: 95%;">
        <div style="height: 88%;width: 100%;overflow: auto;">
            <table class="table table-hover table-bordered"
                   style="border-collapse: collapse;width: 100%;table-layout: fixed;">
                <thead>
                <tr>
                    <th scope="col" style="width: 20%;">来文单位</th>
                    <th scope="col" style="width: 10%;">文号</th>
                    <th scope="col" style="width: 10%;">密级程度</th>
                    <th scope="col" style="width: 8%;">份数</th>
                    <th scope="col" style="width: 8%;">状态</th>
                    <th scope="col" style="width: 8%;">办理人</th>
                    <th scope="col" style="width: 8%;">操作</th>
                </tr>
                </thead>
                <tbody style="overflow: auto;" id="t_table"></tbody>
            </table>
            <div id="img-display" style="width: 75%;text-align: center;position: fixed;display: none;">
                <div style="margin-top: 10%;">
                    <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                    <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                </div>
            </div>
        </div>
        <div style="width: 100%;border: #cfcfcf solid 0.5px;"></div>
        <div id="pagination" class="pagination" style="margin-left: 20px;margin-top: 1.5%;"></div>
    </div>

    <div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" style="margin-top: 3%;">
            <div class="modal-content"
                 style="height: 500px;border-radius: 7px;width: 900px;margin-left: 15%;background: #F8F8FF;">
                <div class="modal-header" style="height: 50px;">
                    <h5 class="modal-title" style="line-height: 50px;width: 10%;">执行人</h5>
                    <button id="close-model" type="button" class="close" data-dismiss="modal" aria-label="Close"
                            style="margin-right: 3%;line-height: 50px;">
                        <span aria-hidden="true" style="font-size: 28px;">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 200px;overflow: auto;">
                    <table class="table table-hover table-bordered" style="border-collapse: collapse;width: 100%;table-layout: fixed;">
                        <thead>
                        <tr>
                            <th scope="col" style="width: 10%;">办理人</th>
                            <th scope="col" style="width: 5%;">状态</th>
                            <th scope="col" style="width: 20%;">审批意见</th>
                            <th scope="col" style="width: 8%;">办理时间</th>
                        </tr>
                        </thead>
                        <tbody style="overflow: auto;" id="t_table1"></tbody>
                    </table>

                    <div style="width: 100%;height: 35px;background: #cfcfcf;padding-left: 40px;line-height: 35px;font-size: 18px;color: #0b0b0b;">
                        接收人
                    </div>

                    <table class="table table-hover table-bordered" style="border-collapse: collapse;width: 100%;table-layout: fixed;">
                        <thead>
                        <tr>
                            <th scope="col" style="width: 10%;">接收人</th>
                            <th scope="col" style="width: 20%;">状态</th>
                            <th scope="col" style="width: 20%;">签名</th>
                        </tr>
                        </thead>
                        <tbody style="overflow: auto;" id="t_table2"></tbody>
                    </table>
                </div>
                <div class="modal-footer" style="height: 50px;">
                    <button id="model-affirm1" type="button" class="btn btn-primary"
                            style="margin-left: 2%;margin-right: 2%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;确&nbsp;认&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bd-example-modal-xl1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" style="margin-top: 3%;">
            <div class="modal-content"
                 style="height: 300px;border-radius: 7px;width: 900px;margin-left: 15%;background: #F8F8FF;">
                <div class="modal-header" style="height: 50px;">
                    <h5 class="modal-title" style="line-height: 50px;width: 10%;">转办流程</h5>
                    <button id="close-model3" type="button" class="close" data-dismiss="modal" aria-label="Close"
                            style="margin-right: 3%;line-height: 50px;">
                        <span aria-hidden="true" style="font-size: 28px;">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 100px;padding: 1%;">
                    <div style="width: 100%;">
                        <label for="">原办理人：</label>
                        <input id="yuanbanliren" type="text" value="{{ realname }}" placeholder="{{ realname }}" style="width: 70%;border-radius: 7px;border: #dfdfdf solid 0.5px;padding-left: 1%;" disabled>
                    </div>

                    <div style="width: 100%;margin-top: 2%;">
                        <label for="">转&nbsp;&nbsp;办&nbsp;&nbsp;人：</label>
                        <input id="Administrative_person" data-toggle="modal" data-target=".bd-example-modal-xl2"
                               onclick="entrust1()" type="text"
                               style="width: 70%;border-radius: 7px;border: #dfdfdf solid 0.5px;padding-left: 1%;">
                    </div>
                </div>
                <div class="modal-footer" style="height: 50px;">
                    <button id="model-affirm2" type="button" class="btn btn-primary"
                            style="margin-left: 2%;margin-right: 2%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bd-example-modal-xl2" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" style="margin-top: 3%;">
            <div class="modal-content"
                 style="height: 600px;border-radius: 7px;width: 900px;margin-left: 15%;background: #F8F8FF;">
                <div class="modal-header" style="height: 50px;">
                    <h5 class="modal-title" style="line-height: 50px;width: 10%;">选择执行人</h5>
                    <button id="close-model1" type="button" class="close" data-dismiss="modal" aria-label="Close"
                            style="margin-right: 3%;line-height: 50px;">
                        <span aria-hidden="true" style="font-size: 28px;">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 200px;padding: 1%;">
                    <div style="display: inline-block;width: 30%;height: 70%;border-right: #E8E8E8 solid 1px;">
                        <div style="width: 100%;height: 35px;line-height: 35px;background: #98A6AD;padding-left: 2%;color: #0b0b0b">
                            选择部门
                        </div>
                        <div id="department_list1" style="width: 100%;height: 95%;overflow: auto;">

                        </div>
                    </div>

                    <div style="display: inline-block;width: 69%;height: 70%;overflow: auto;vertical-align: top;left: 0;">
                        <table class="table table-hover table-bordered" style="border-collapse: collapse;">
                            <thead>
                            <tr>
                                <th scope="col" style="width: 1%;">

                                </th>
                                <th scope="col" style="width: 2%;">序号</th>
                                <th scope="col" style="width: 8%;">姓名</th>
                            </tr>
                            </thead>
                            <tbody style="overflow: auto;" id="t_table3"></tbody>
                        </table>
                        <div id="img-display2" style="width: 75%;text-align: center;">
                            <div style="margin-top: 10%;">
                                <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                                <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                            </div>
                        </div>
                    </div>

                    <div style="height: 30%;width: 100%;border-top: #E8E8E8 solid 1px;overflow: auto;">
                        <div id="checked-label1" style="margin-top: 1%;margin-left: 3%;">

                        </div>
                    </div>

                </div>
                <div class="modal-footer" style="height: 50px;">
                    <button id="model-affirm3" type="button" class="btn btn-primary"
                            style="margin-left: 2%;margin-right: 2%;" onclick="summit_val('Administrative_person')">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("administrative").className = "add-nav-active";
            document.getElementById("addressee_monitoring").className = "add_class";
            document.getElementById("dispatch-Administrator-1").style.display = "inline-block";
            document.getElementById("dispatch-Administrator").style.display = "none";
            document.getElementById("jiantou4").className = "iconfont icon-jiantou-shang";
            document.getElementById("jiantou5").className = "iconfont icon-jiantou-xia";
            document.getElementById("jiantou").className = "iconfont icon-jiantou-xia";
            station_list();
        };

        // 选择流程执行人弹框
        function entrust1() {
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/technological/delegation", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        window.personnel_list = JsonDate["data"];
                        var department_list = document.getElementById("department_list1");
                        department_list.innerHTML = "";
                        var ul_tag = document.createElement("ul");
                        for (var i = 0; i < JsonDate["branch_list"].length; i++) {
                            var li_tag = document.createElement("li");
                            li_tag.innerHTML = JsonDate["branch_list"][i];
                            li_tag.setAttribute("onclick", "choice_peopel1('" + JsonDate["branch_list"][i] + "')");
                            li_tag.className = "li-class";
                            ul_tag.appendChild(li_tag);
                            department_list.appendChild(ul_tag);
                        }
                    }
                }
            };
        }

        // 创建右侧选择人员列表
        function choice_peopel1(choice_key) {
            var personnel_list = window.personnel_list;
            document.getElementById("img-display2").style.display = "none";
            var t_table = document.getElementById("t_table3");
            deltr2();
            for (var i = 0; i < personnel_list[choice_key].length; i++) {
                var tr = document.createElement("tr");
                var td = document.createElement("td");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                td.innerHTML = "<input id='" + personnel_list[choice_key][i] + "' class='check_box' type=\"checkbox\" onclick='choice_consignor1(this.id)'>";
                td.style.textAlign = "center";
                td1.innerHTML = i + 1;
                td1.style.textAlign = "center";
                td2.innerHTML = personnel_list[choice_key][i];
                td2.title = personnel_list[choice_key][i];
                td2.style.textAlign = "center";

                tr.appendChild(td);
                tr.appendChild(td1);
                tr.appendChild(td2);
                t_table.appendChild(tr);
            }
        }

        // 删除列表
        function deltr2() {
            var tb = document.getElementById('t_table3');
            var rowNum = tb.rows.length;
            for (i = 0; i < rowNum; i++) {
                tb.deleteRow(i);
                rowNum = rowNum - 1;
                i = i - 1;
            }
        }

        // 选择委托人
        function choice_consignor1(ele_id) {
            check_more_one_not(ele_id);
            document.getElementById("checked-label1").innerHTML = "<span style='margin-left: 1%;'>" + ele_id + "</span>";
        }

        function check_more_one_not(ele_id) {
            var check_box_list = document.getElementsByClassName("check_box");
            for (var i = 0; i < check_box_list.length; i++) {
                if (String(check_box_list[i].id) !== String(ele_id)) {
                    document.getElementById(check_box_list[i].id).checked = false;
                } else {
                    document.getElementById(check_box_list[i].id).checked = true;
                }
            }
        }

        // 选择执行人
        function summit_val(ele_id) {
            var executor = '';
            if (ele_id === "Administrative_person") {
                var checked_label = document.getElementById("checked-label1");
                for (var j = 0; j < checked_label.children.length; j++) {
                    executor = executor + checked_label.children[j].innerText + ", ";
                }
                document.getElementById("Administrative_person").setAttribute("value", executor.slice(0, -2));
                document.getElementById("close-model1").click();
            } else {
                checked_label = document.getElementById("checked-label");
                for (var t = 0; t < checked_label.children.length; t++) {
                    executor = executor + checked_label.children[t].innerText + ", ";
                }
                document.getElementById("executor").innerHTML = executor.slice(0, -2);
                document.getElementById("close-model").click();
            }
        }

        function summit_val1(document_id) {
            document.getElementById("close-model3").click();
            var Administrative_person = document.getElementById("Administrative_person").value.trim();
            var yuanbanliren = document.getElementById("yuanbanliren").value.trim();
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/administrative/approval_opinion", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("Administrative_person=" + String(Administrative_person) + "&document_id=" + document_id + "&yuanbanliren=" + String(yuanbanliren));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        window.location = "/administrative/dispatch_monitoring.html";
                    }
                }
            };
        }

        function click_ul() {
            if (document.getElementById("jiantou").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou").className = "iconfont icon-jiantou-xia";
                document.getElementById("organizational_management_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou").className = "iconfont icon-jiantou-shang";
                document.getElementById("organizational_management_ul").style.display = "none";
            }
        }

        function click_ul1() {
            if (document.getElementById("jiantou1").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou1").className = "iconfont icon-jiantou-xia";
                document.getElementById("gebruikersrol_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou1").className = "iconfont icon-jiantou-shang";
                document.getElementById("gebruikersrol_ul").style.display = "none";
            }
        }

        function click_ul2() {
            if (document.getElementById("jiantou2").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou2").className = "iconfont icon-jiantou-xia";
                document.getElementById("meeting_management_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou2").className = "iconfont icon-jiantou-shang";
                document.getElementById("meeting_management_ul").style.display = "none";
            }
        }

        function click_ul3() {
            if (document.getElementById("jiantou3").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou3").className = "iconfont icon-jiantou-xia";
                document.getElementById("issue_approval_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou3").className = "iconfont icon-jiantou-shang";
                document.getElementById("issue_approval_ul").style.display = "none";
            }
        }

        function click_ul_9() {
            if (document.getElementById("jiantou5").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator-1").style.display = "inline-block";
            }else {
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator-1").style.display = "none";
            }
        }

        function click_ul_10() {
            if (document.getElementById("jiantou4").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator").style.display = "inline-block";
            }else {
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator").style.display = "none";
            }
        }

        // 加载我的申请列表
        function station_list(sent_str="", page=1, document_id='') {
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/administrative/addressee_monitoring.html", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            var sendString = sent_str+"&page="+String(page);
            xhr.send(sendString);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        window.preview_dict = JsonDate["preview_dict"];
                        window.receive_dict = JsonDate["receive_dict"];
                        create_table(JsonDate["count_num"], JsonDate["data"], page);
                        pagenum(JsonDate["count_num"], page);
                    }
                }
            };
        }

        function create_table(count_num, json_data, page) {
            var t_table = document.getElementById("t_table");
            deltr("t_table");
            if (json_data.length === 0){
                document.getElementById("img-display").style.display = "inline-block";
            }else {
                document.getElementById("img-display").style.display = "none";
            }
            for (var i=0; i<json_data.length; i++) {
                var tr = document.createElement("tr");
                var td = document.createElement("td");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");var td4 = document.createElement("td");var td5 = document.createElement("td");var td6 = document.createElement("td");
                if (json_data[i]["status"] === "批阅中" || json_data[i]["status"] === "待分发"){
                    tr.style.color="red";
                    if (json_data[i]["revocation"]){
                        td6.innerHTML = "<a onclick='create_process("+json_data[i]["id"]+")' data-toggle=\"modal\" data-target=\".bd-example-modal-xl\" style='color: red;' href='#'><i class=\"iconfont icon-guochengjiankong-lishishuju\"></i>过程</a> | " + "<a style='color: red;' href='/administrative/addressee_examine.html?monitoring=true&id="+json_data[i]["id"]+"'><i class=\"iconfont icon-chakanpiyue\"></i>查看</a>" + "<br><a onclick='station_list(sent_str=\"\", page=1, countermand=true, document_id="+json_data[i]["id"]+")' style='color: red;' href='#'><i class=\"iconfont icon-zhuanban\"></i>撤回</a>";
                    }
                    if (!json_data[i]["revocation"]) {
                        td6.innerHTML = "<a onclick='create_process("+json_data[i]["id"]+")' data-toggle=\"modal\" data-target=\".bd-example-modal-xl\" style='color: red;' href='#'><i class=\"iconfont icon-guochengjiankong-lishishuju\"></i>过程</a> | " + "<a style='color: red;' href='/administrative/addressee_examine.html?monitoring=true&id="+json_data[i]["id"]+"'><i class=\"iconfont icon-chakanpiyue\"></i>查看</a>";
                    }
                    td6.style.textAlign = "center";
                }else if (json_data[i]["status"] === "收阅中"){
                    tr.style.color="#2EFE9A";
                    if (json_data[i]["revocation"]){
                        td6.innerHTML = "<a onclick='create_process("+json_data[i]["id"]+")' data-toggle=\"modal\" data-target=\".bd-example-modal-xl\" style='color: #2EFE9A;' href='#'><i class=\"iconfont icon-guochengjiankong-lishishuju\"></i>过程</a> | " + "<a style='color: #2EFE9A;' href='/administrative/addressee_examine.html?monitoring=true&id="+json_data[i]["id"]+"'><i class=\"iconfont icon-chakanpiyue\"></i>查看</a>" + "<br><a onclick='station_list(sent_str=\"\", page=1, countermand=true, document_id="+json_data[i]["id"]+")' style='color: #2EFE9A;' href='#'><i class=\"iconfont icon-zhuanban\"></i>撤回</a>";
                    }
                    if (!json_data[i]["revocation"]) {
                        td6.innerHTML = "<a onclick='create_process("+json_data[i]["id"]+")' data-toggle=\"modal\" data-target=\".bd-example-modal-xl\" style='color: #2EFE9A;' href='#'><i class=\"iconfont icon-guochengjiankong-lishishuju\"></i>过程</a> | " + "<a style='color: #2EFE9A;' href='/administrative/addressee_examine.html?monitoring=true&id="+json_data[i]["id"]+"'><i class=\"iconfont icon-chakanpiyue\"></i>查看</a>";
                    }
                    td6.style.textAlign = "center";
                }else {
                    td6.innerHTML = "<a onclick='create_process("+json_data[i]["id"]+")' data-toggle=\"modal\" data-target=\".bd-example-modal-xl\" href='#'><i class=\"iconfont icon-guochengjiankong-lishishuju\"></i>过程</a> | "+"<a href='/administrative/addressee_examine.html?monitoring=true&id="+json_data[i]["id"]+"'><i class=\"iconfont icon-chakanpiyue\"></i>查看</a>";
                    td6.style.textAlign = "center";
                }
                td.innerHTML = json_data[i]["Jeremy_levin_unit"];td.title=json_data[i]["Jeremy_levin_unit"];td.style.paddingLeft="0.5%";td.style.width = "8%";
                td1.innerHTML = json_data[i]["the_Titanic"];td1.title = json_data[i]["the_Titanic"];td1.style.textAlign = "center";
                td2.innerHTML = json_data[i]["confidentiality_level"];td2.title = json_data[i]["confidentiality_level"];td2.style.width = "8%";td2.style.textAlign = "center";
                td3.innerHTML = json_data[i]["file_attachments"];td3.title = json_data[i]["file_attachments"];td3.style.width = "8%";td3.style.textAlign = "center";
                td4.innerHTML = json_data[i]["status"];td4.title=json_data[i]["status"];td4.style.textAlign = "center";
                if (json_data[i]["status"] === "已完成" || json_data[i]["status"] === "接收中"){
                    td5.innerHTML = "";
                }else {
                    td5.innerHTML = json_data[i]["shenpi_str"];td5.title=json_data[i]["shenpi_str"];
                }

                tr.appendChild(td);tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(td5);tr.appendChild(td6);
                t_table.appendChild(tr);
            }

        }

        function pagenum(dataTotals=0, page=1) {
            new myPagination({
                id: 'pagination',
                curPage: page, //初始页码
                pageAmount: 20,  //每页多少条
                dataTotal: dataTotals, //总共多少条数据
                pageTotal:  Math.ceil(parseInt(dataTotals, 10)/20), //总页数
                pageSize: 5, //可选,分页个数
                showPageTotalFlag:true, //是否显示数据统计
                showSkipInputFlag:true, //是否支持跳转
                getPage: function (page) {
                    station_list(sent_str='', page);
                    document.getElementById("check_all").checked = false;
                }
            });
        }

        // 删除列表
        function deltr(t_table){
            var tb = document.getElementById(t_table);
            var rowNum=tb.rows.length;
            for (i=0;i<rowNum;i++) {
                tb.deleteRow(i);
                rowNum=rowNum-1;
                i=i-1;
            }
        }

        function create_process(ele_id) {
            deltr("t_table1");deltr("t_table2");
            var t_table = document.getElementById("t_table1");var t_table2 = document.getElementById("t_table2");
            for (var i=0; i<preview_dict[ele_id].length; i++) {
                var tr = document.createElement("tr");
                var td = document.createElement("td");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");
                td.innerHTML = preview_dict[ele_id][i]["name"];td.title=preview_dict[ele_id][i]["name"];td.style.textAlign = "center";
                td1.innerHTML = preview_dict[ele_id][i]["status"];td1.title = preview_dict[ele_id][i]["status"];td1.style.width = "8%";td1.style.textAlign = "center";
                td2.innerHTML = preview_dict[ele_id][i]["option"];td2.title = preview_dict[ele_id][i]["option"];td2.style.width = "8%";td2.style.paddingLeft="0.5%";
                td3.innerHTML = preview_dict[ele_id][i]["examines_time"];td3.title = preview_dict[ele_id][i]["examines_time"];td3.style.width = "8%";td3.style.textAlign = "center";
                tr.appendChild(td);tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);
                t_table.appendChild(tr);
            }

            for (var I=0; I<receive_dict[ele_id].length; I++) {
                var tr1 = document.createElement("tr");
                var td_1 = document.createElement("td");var td_2 = document.createElement("td");var td_3 = document.createElement("td");
                td_1.innerHTML = receive_dict[ele_id][I]["do_people"];td_1.title=receive_dict[ele_id][I]["do_people"];td_1.style.textAlign = "center";
                td_2.innerHTML = receive_dict[ele_id][I]["status"];td_2.title = receive_dict[ele_id][I]["status"];td_2.style.width = "8%";td_2.style.textAlign = "center";
                if (receive_dict[ele_id][I]["status"] === "已收阅"){
                    td_3.innerHTML = '<img style="width: 100px;height: 30px;" src="'+receive_dict[ele_id][I]["signature"]+'" alt=""/>';td_3.style.paddingLeft = "1%";
                }else {
                    td_3.innerHTML = "";
                }
                tr1.appendChild(td_1);tr1.appendChild(td_2);tr1.appendChild(td_3);
                t_table2.appendChild(tr1);
            }
        }
    </script>
{% endblock %}
